<script setup lang="ts">
import { onMounted, ref, reactive, onBeforeUnmount, shallowRef, watch, defineModel } from 'vue';
import { Global } from '../Global';

const pageSize = defineModel<number>('pageSize');
const total = defineModel<number>('total');
const pageNumber = defineModel<number>('pageNumber');

const emit = defineEmits(['current-change', 'size-change']);

onMounted(() => {
  var pagesize = localStorage.getItem("Page-Size");
  if (pagesize) {
    pageSize.value = parseInt(pagesize);
  }
});

// 定义事件处理函数，并触发事件
const handleCurrentChange = (newPage: number) => {
  emit('current-change', newPage);
};

const handleSizeChange = (newSize: number) => {
  emit('size-change', newSize);
  localStorage.setItem("Page-Size",newSize.toString());
};

</script>
<template>
  <el-pagination @current-change="handleCurrentChange" size="small" background layout="total, sizes, prev, pager, next, jumper"
    :total="total" :page-sizes="[10,15, 20, 25,30, 40,50, 60,70,80,90,100]" v-model:page-size="pageSize" @size-change="handleSizeChange"
    v-model:current-page="pageNumber" class="mt-4" />
</template>

<style scoped lang="scss"></style>